<!--
 * @Author: gao_m3
 * @Date: 2020-09-03 08:52:51
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 19:27:54
 * @Descripttion: 
--> 
<template>
  <div class="drawer-container">
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <i class="fks-title-icon"></i>
          <span>{{ LANG.THEME_AND_LAYOUT }}</span>
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <div>{{ LANG.LAYOUT }}</div>
            <div class="setting-checkbox">
              <fks-tooltip
                effect="dark"
                :content="LANG.SIDEBAR_NAVIGATION"
                placement="top"
              >
                <div class="setting-item" @click="handleLayout(0)">
                  <img src="@/assets/img/tips/side.svg" alt="sidemenu" />
                  <div class="setting-selectIcon" v-if="topMenu == 0">
                    <i class="fks-icon-check"></i>
                  </div>
                </div>
              </fks-tooltip>
              <fks-tooltip
                effect="dark"
                :content="LANG.TOP_NAVIGATION"
                placement="top"
              >
                <div class="setting-item" @click="handleLayout(1)">
                  <img src="@/assets/img/tips/top.svg" alt="topmenu" />
                  <div class="setting-selectIcon" v-if="topMenu == 1">
                    <i class="fks-icon-check"></i>
                  </div>
                </div>
              </fks-tooltip>
              <fks-tooltip
                effect="dark"
                :content="LANG.TOP_NAVIGATION"
                placement="top"
              >
                <div class="setting-item" @click="handleLayout(2)">
                  <img src="@/assets/img/tips/grade.svg" alt="topmenu" />
                  <div class="setting-selectIcon" v-if="topMenu == 2">
                    <i class="fks-icon-check"></i>
                  </div>
                </div>
              </fks-tooltip>
            </div>
          </div>
          <fks-divider></fks-divider>
          <div class="row-content">
            <div>{{ LANG.THEME_COLOR }}</div>
            <div class="setting-checkbox">
              <fks-tooltip
                class="setting-color"
                v-for="item in colorList"
                placement="top"
                :key="item.code"
              >
                <template slot="content">{{ item[$lang] }}</template>
                <fks-tag :color="item.code" @click="themeChange(item.code)">
                  <i class="fks-icon-check" v-if="item.code === theme"></i>
                </fks-tag>
              </fks-tooltip>
            </div>
          </div>
          <fks-divider></fks-divider>
          <div class="row-content">
            <p>{{ LANG.TABBAR }}</p>
            <div class="setting-checkbox">
              <fks-tooltip
                effect="dark"
                :content="LANG.TAB_TAG"
                placement="top"
              >
                <div class="setting-item" @click="handleTags(0)">
                  <img src="@/assets/img/tips/tag_show.png" alt="tag_show" />
                  <div class="setting-selectIcon" v-if="tagsView == 0">
                    <i class="fks-icon-check"></i>
                  </div>
                </div>
              </fks-tooltip>
              <fks-tooltip
                effect="dark"
                :content="LANG.TAG_BREAD"
                placement="top"
              >
                <div class="setting-item" @click="handleTags(1)">
                  <img src="@/assets/img/tips/tag_bread.png" alt="tag_bread" />
                  <div class="setting-selectIcon" v-if="tagsView == 1">
                    <i class="fks-icon-check"></i>
                  </div>
                </div>
              </fks-tooltip>
              <fks-tooltip
                effect="dark"
                :content="LANG.HIDE_TABBAR"
                placement="top"
              >
                <div class="setting-item" @click="handleTags(2)">
                  <img src="@/assets/img/tips/tag_hide.png" alt="tag_hide" />
                  <div class="setting-selectIcon" v-if="tagsView == 2">
                    <i class="fks-icon-check"></i>
                  </div>
                </div>
              </fks-tooltip>
            </div>
          </div>
          <fks-divider></fks-divider>
          <div class="row-content">
            <p>{{ LANG.STRIPE }}</p>
            <div class="setting-checkbox">
              <fks-tooltip
                effect="dark"
                :content="LANG.SHOW_STRIPE"
                placement="top"
              >
                <div class="setting-item" @click="handleStripe(true)">
                  <img src="@/assets/img/tips/stripe_show.png" alt="tag_show" />
                  <div class="setting-selectIcon" v-if="stripe">
                    <i class="fks-icon-check"></i>
                  </div>
                </div>
              </fks-tooltip>
              <fks-tooltip
                effect="dark"
                :content="LANG.HIDE_STRIPE"
                placement="top"
              >
                <div class="setting-item" @click="handleStripe(false)">
                  <img src="@/assets/img/tips/stripe_hide.png" alt="tag_hide" />
                  <div class="setting-selectIcon" v-if="!stripe">
                    <i class="fks-icon-check"></i>
                  </div>
                </div>
              </fks-tooltip>
            </div>
          </div>
        </div> </fks-col
    ></fks-row>
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <div class="fks-title-icon"></div>
          {{ LANG.FAVICON_ANG_LOGO }}
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <div>{{ LANG.WEIBISTE_TITLE }}</div>
            <div>
              <fks-input
                class="drawer-inputx"
                :placeholder="LANG.ENTER_WEISITE_TITLE"
                v-model="websiteText"
                show-word-limit
                maxlength="50"
              ></fks-input>
            </div>
          </div>
          <fks-divider></fks-divider>
          <div class="row-content">
            <div>
              <div>{{ LANG.FAVICON }}</div>
              <div class="fks-upload__tip">
                {{ LANG.FAVICON_TIP }}
              </div>
            </div>
            <fks-upload
              class="avatar-uploader"
              :show-file-list="false"
              :action="url"
              :headers="{ 'Fawkes-Auth': accessToken }"
              :on-success="getImgUrlx"
              :before-upload="beforeAvatarUploadx"
            >
              <div class="img-container">
                <img :src="websiteLogo" class="website_avatar" />
                <!-- <div slot="tip" class="fks-upload__tip">
                  {{ LANG.FAVICON_TIP }}
                </div> -->
              </div>
            </fks-upload>
          </div>
          <fks-divider></fks-divider>
          <div class="row-content">
            <div>
              <div>Logo</div>
              <div class="fks-upload__tip">
                {{ LANG.LOGO_TIP }}
              </div>
            </div>
            <div class="avatar-uploader">
              <img :src="logo" class="logo_avatar" @click="visible = true" />
            </div>
          </div>
          <fks-divider></fks-divider>
          <div class="row-content">
            <div>{{ LANG.COPYRIGHT_INFO }}</div>
            <fks-switch v-model="footerView" class="drawer-switch" />
          </div>
          <fks-divider></fks-divider>
          <div class="row-content">
            <div>{{ LANG.COPYRIGHT }}</div>
            <fks-input
              class="drawer-inputx"
              :placeholder="LANG.COPYRIGHT_TIP"
              v-model="copyright"
              show-word-limit
              maxlength="50"
            ></fks-input>
          </div>
        </div> </fks-col
    ></fks-row>
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <div class="fks-title-icon"></div>
          {{ LANG.WATERMARK }}
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <div>
              {{ LANG.PAGE_WATERMARK
              }}<fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.PAGE_TIP }}
                </div>
                <i class="fks-icon-question"></i>
              </fks-tooltip>
            </div>
            <fks-switch v-model="pageWatermark" class="drawer-switch" />
          </div>
          <fks-divider></fks-divider>
          <div class="row-content">
            <div>
              {{ LANG.IMAGE_WATERMARK }}
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.IMAGE_TIP }}
                </div>
                <i class="fks-icon-question"></i>
              </fks-tooltip>
            </div>
            <fks-switch v-model="imgWatermark" class="drawer-switch" />
          </div>
          <fks-divider></fks-divider>
          <div class="watermark">
            <div style="margin: auto; margin-left: 4px">
              {{ LANG.POSITION }}
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.POSI_TIP }}
                </div>
                <i class="fks-icon-question"></i>
              </fks-tooltip>
            </div>
            <div class="contain">
              <div v-for="(i, index) in 9" :key="index">
                <div class="watermark-item" @click="watermarkPosi = i">
                  <div class="item-selectIcon" v-if="watermarkPosi == i">
                    <i class="fks-icon-check"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <fks-divider></fks-divider>
          <div class="row-content">
            <div>
              {{ LANG.CONTENT
              }}<fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.PREFIX_TIP }}
                </div>
                <i class="fks-icon-question"></i>
              </fks-tooltip>
            </div>
            <fks-input
              class="drawer-inputx"
              placeholder="clientName"
              v-model="watermarkPrefix"
              show-word-limit
              maxlength="50"
            ></fks-input>
          </div>
          <fks-divider></fks-divider>
          <div class="row-content">
            <div>
              {{ LANG.APPEND }}
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.SUFFIX_TIP }}
                </div>
                <i class="fks-icon-question"></i>
              </fks-tooltip>
            </div>
            <fks-select
              style="width: 280px"
              v-model="watermarkSuffix"
              :class="
                $lang == 'en' ? 'watermark-select-en' : 'watermark-select'
              "
            >
              <fks-option
                v-for="(item, index) in watermarkSuffixSelect"
                :key="index"
                :label="item[$lang]"
                :value="item.code"
              ></fks-option>
            </fks-select>
          </div></div></fks-col
    ></fks-row>
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <div class="fks-title-icon"></div>
          {{ LANG.LANGUAGE_AND_TIMEZONE }}
        </div>
        <div class="row-content-container">
          <!-- <div class="site-title">
              <span>日期格式</span>

              <fks-select v-model="dateFormat">
                <fks-option
                  v-for="item in date"
                  :key="item"
                  :label="item"
                  :value="item"
                ></fks-option>
              </fks-select>
            </div> -->
          <div class="row-content">
            <div>{{ LANG.DEFAULT_LANG }}</div>
            <fks-select
              v-model="language"
              :placeholder="LANG.LANG_TIP"
              style="width: 280px"
            >
              <fks-option
                v-for="(item, index) in languages"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></fks-option>
            </fks-select>
          </div>
          <fks-divider></fks-divider>
          <div class="row-content">
            <div>{{ LANG.DEFAULT_TIMEZONE }}</div>
            <fks-select
              v-model="timezone"
              :placeholder="LANG.TIMEZONE_TIP"
              class="drawer-input"
              @change="zone"
            >
              <fks-option
                v-for="(item, index) in timeZones"
                :key="index"
                :label="item.label"
                :value="item.label"
              ></fks-option>
            </fks-select>
          </div>
        </div> </fks-col
    ></fks-row>
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <div class="fks-title-icon"></div>
          {{ LANG.ADVANCED_SETTING }}
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <span style="display: inline-block; width: 140px"
              >{{ LANG.REAL_TIME_PUSH }}
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.REAL_TIP }}
                </div>
                <i class="fks-icon-question"></i> </fks-tooltip
            ></span>
            <fks-switch v-model="realTimePush" class="drawer-switch" />
          </div>
          <fks-divider> </fks-divider>
          <div class="row-content">
            <span style="display: inline-block; width: 140px">{{
              LANG.INTERNATIONALIZATION
            }}</span>
            <fks-switch v-model="i18n" class="drawer-switch" />
          </div></div></fks-col
    ></fks-row>
    <logo-upload
      v-if="visible"
      :logo.sync="logo"
      :visible.sync="visible"
    ></logo-upload>
    <div style="margin-bottom: 36px; text-align: center">
      <fks-button
        @click="init"
        icon="fks-icon-turn-right"
        v-permission:1="['general:refresh']"
        >{{ LANG.REDUCTION }}</fks-button
      >
      <fks-button
        type="primary"
        @click="submit"
        icon="fks-icon-check"
        :loading="loading"
        v-permission:1="['general:update']"
        >{{ LANG.UPDATE }}</fks-button
      >
    </div>
  </div>
</template>

<script>
import Mix from '@/mixins/module'
import storage from '@/utils/storage'
import request from '@/utils/request'
import { ENUM, LATEST_CLIENT_CONFIG } from '@/store/State/stateTypes'
import * as types from '@/store/Getter/getterTypes.js'
import {
  SET_CLIENT_CONFIG,
  SET_LATEST_CLIENT_CONFIG
} from '@/store/Mutation/mutationTypes'
import {
  CHANGE_INTERFACE,
  CHANGE_WATERMARK,
  GET_LATEST_CLIENT_CONFIG,
  PUT_CLIENT_CONFIG
} from '@/store/Action/actionTypes'
import { getClientConfig } from '@/api/app'
import { timeZones } from './list.js'
import { matchFormatToTransZone } from '@/utils/timezone.js'
import LogoUpload from './LogoUpload'
export default {
  components: { LogoUpload },
  name: 'General',
  mixins: [Mix],
  data() {
    return {
      visible: false,
      loading: false,
      hasSubmitted: false,
      timeZones: timeZones,
      accessToken: this.$storage.get('access_token'),
      navTheme: 'dark',
      logoText: '',
      date: [
        'yyyy-MM-dd HH:mm:ss',
        'yyyy MM dd HH:mm:ss',
        'yyyy/MM/dd HH:mm:ss'
      ],
      url: this.VUE_APP_UPLOAD_API
    }
  },
  watch: {
    $lang(val) {
      this.language = val
    }
  },

  computed: {
    //水印后置字典
    watermarkSuffixSelect() {
      return this.$store.state[ENUM].watermark || []
    },
    languages() {
      return this.$store.state[ENUM].languages || []
    },
    colorList() {
      return this.$store.state[ENUM].colorList || []
    },
    //时区
    timezone: {
      get() {
        return this.$store.getters[types.TIMEZONE]
      },
      set(val) {}
    },
    //全局水印
    pageWatermark: {
      get() {
        return this.$store.getters[types.PAGE_WATERMARK]
      },
      set(val) {
        this.$store.dispatch(CHANGE_WATERMARK, {
          key: 'pageWatermark',
          value: val
        })
      }
    },
    //局部水印
    imgWatermark: {
      get() {
        return this.$store.getters[types.IMG_WATERMARK]
      },
      set(val) {
        this.$store.dispatch(CHANGE_WATERMARK, {
          key: 'imgWatermark',
          value: val
        })
      }
    },
    //水印位置
    watermarkPosi: {
      get() {
        return this.$store.getters[types.WATERMARK_POSI]
      },
      set(val) {
        this.$store.dispatch(CHANGE_WATERMARK, {
          key: 'watermarkPosi',
          value: val
        })
      }
    },
    //前缀 String/clientname
    watermarkPrefix: {
      get() {
        return this.$store.getters[types.WATERMARK_PREFIX]
      },
      set(val) {
        this.$store.dispatch(CHANGE_WATERMARK, {
          key: 'watermarkPrefix',
          value: val
        })
      }
    },
    //后缀 用户名/性别 0/1/2/3
    watermarkSuffix: {
      get() {
        return this.$store.getters[types.WATERMARK_SUFFIX]
      },
      set(val) {
        this.$store.dispatch(CHANGE_WATERMARK, {
          key: 'watermarkSuffix',
          value: val
        })
      }
    },
    //日期格式
    dateFormat: {
      get() {
        return this.$store.getters[types.DATE_FORMAT]
      },
      set(val) {
        this.$storage.set('dateFormat', val)
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'dateFormat',
          value: val
        })
      }
    },
    //版权信息
    copyright: {
      get() {
        return this.$store.getters[types.COPYRIGHT]
      },
      set(val) {
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'copyright',
          value: val
        })
      }
    },
    //底部开启关闭
    footerView: {
      get() {
        return this.$store.getters[types.FOOTER_VIEW]
      },
      set(val) {
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'footerView',
          value: val
        })
      }
    },
    //默认语言
    language: {
      get() {
        return this.$store.getters[types.LANGUAGE]
      },
      set(val) {
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'language',
          value: val
        })
      }
    },
    //站点标题
    websiteText: {
      get() {
        return this.$store.getters[types.WEBSITE_TEXT]
      },
      set(val) {
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'websiteText',
          value: val
        })
      }
    },
    logo: {
      get() {
        return this.$store.getters[types.LOGO]
      },
      set(val) {
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'logo',
          value: val
        })
      }
    },
    //站点Logo
    websiteLogo: {
      get() {
        return this.$store.getters[types.WEBSITE_LOGO]
      },
      set(val) {
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'websiteLogo',
          value: val
        })
        document.getElementById('titleIcon').href = val
      }
    },
    //斑马纹
    stripe: {
      get() {
        return this.$store.getters[types.STRIPE]
      },
      set(val) {
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'stripe',
          value: val
        })
      }
    },
    //标签栏
    tagsView: {
      get() {
        return this.$store.getters[types.TAGS_VIEW]
      },
      set(val) {
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'tagsView',
          value: val
        })
      }
    },
    //导航模式
    topMenu: {
      get() {
        return this.$store.getters[types.TOP_MENU]
      },
      set(val) {
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'topMenu',
          value: val
        })
      }
    },
    theme: {
      get() {
        return this.$store.getters[types.THEME]
      },
      set(val) {
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'theme',
          value: val
        })
      }
    },

    //实时推送
    realTimePush: {
      get() {
        return this.$store.getters[types.REAL_TIME_PUSH]
      },
      set(val) {
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'realTimePush',
          value: val
        })
      }
    },
    i18n: {
      get() {
        return this.$store.getters[types.I18N]
      },
      set(val) {
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: 'i18n',
          value: val
        })
      }
    },
    latestClientConfig() {
      return this.$store.state[LATEST_CLIENT_CONFIG]
    }
  },
  mounted() {
    this.$store.dispatch(GET_LATEST_CLIENT_CONFIG)
  },
  methods: {
    //时区切换
    zone(val) {
      this.$storage.set('timezone', val)
      // 修改时区后，latestClientConfig中的时间需要手动更新，防止获取时为旧时区，提交时为新时区
      let additionalInfoStr = JSON.stringify(
        this.latestClientConfig.additionalInformation
      )
      additionalInfoStr = matchFormatToTransZone(
        additionalInfoStr,
        val,
        this.timezone
      )
      this.$store.commit(SET_LATEST_CLIENT_CONFIG, {
        ...this.latestClientConfig,
        additionalInformation: JSON.parse(additionalInfoStr)
      })
      this.$store.dispatch(CHANGE_INTERFACE, {
        key: 'timezone',
        value: val
      })
      this.$forceUpdate()
    },
    //上传
    beforeAvatarUpload(file) {
      const isPNG = file.type === 'image/png'
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isPNG) {
        this.$message.error(this.LANG.PNG_TIP)
      }
      if (!isLt10M) {
        this.$message.error(this.LANG.SIZE_TIP)
      }
      return isPNG && isLt10M
    },
    beforeAvatarUploadx(file) {
      const isICO = file.type === 'image/x-icon'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isICO) {
        this.$message.error(this.LANG.MUST_ICO)
      }
      if (!isLt5M) {
        this.$message.error(this.LANG.SIZE_TIP1)
      }
      return isICO && isLt5M
    },
    getImgUrlx(res, file) {
      this.websiteLogo = '/sys-storage/download_image?f8s=' + res.data.fileToken
    },
    @monitor('click', '主题色切换')
    themeChange(val) {
      this.theme = val
    },
    //切换布局
    @monitor('click', '导航模式切换')
    handleLayout(value) {
      this.topMenu = value
    },
    @monitor('click', '标签栏切换')
    handleTags(value) {
      this.tagsView = value
    },
    handleStripe(value) {
      this.stripe = value
    },
    //还原
    init() {
      let additionalInfo = this.latestClientConfig.additionalInformation
      let interfaceConfig = additionalInfo.interfaceConfig
      for (var a in interfaceConfig)
        this.$store.dispatch(CHANGE_INTERFACE, {
          key: a,
          value: interfaceConfig[a]
        })
      this.$message(this.LANG.REDUCTION_TIP)
    },
    /**
     * @description: 提交保存修改
     */
    submit() {
      this.loading = true
      let interfaceConfig = {
        topMenu: this.topMenu,
        tagsView: this.tagsView,
        theme: this.theme,
        stripe: this.stripe,
        websiteText: this.websiteText,
        logo: this.logo.replace(`${this.VUE_APP_BASE_API}`, ''),
        websiteLogo: this.websiteLogo.replace(`${this.VUE_APP_BASE_API}`, ''),
        copyright: this.copyright,
        footerView: this.footerView,
        dateFormat: this.dateFormat,
        timezone: this.timezone,
        language: this.language,
        realTimePush: this.realTimePush,
        i18n: this.i18n
      }
      let watermarkConfig = {
        pageWatermark: this.pageWatermark,
        imgWatermark: this.imgWatermark,
        watermarkPosi: this.watermarkPosi,
        watermarkPrefix: this.watermarkPrefix,
        watermarkSuffix: Number(this.watermarkSuffix)
      }
      let additionalInfo = this.latestClientConfig.additionalInformation
      let settingsJSON = {
        ...this.latestClientConfig,
        additionalInformation: {
          ...additionalInfo,
          interfaceConfig,
          watermarkConfig
        }
      }
      this.$store
        .dispatch(PUT_CLIENT_CONFIG, settingsJSON)
        .then((res) => {
          if (res.status) {
            this.loading = false
            this.$message({
              type: 'success',
              message: this.LANG.UPDATE_SUCCESS
            })
            this.$storage.set('default-timezone', this.timezone)
          }
        })
        .catch((err) => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.fks-col {
  min-width: 440px;
}

::v-deep .fks-divider--horizontal {
  margin: 0;
}

::v-deep .fks-input__inner {
  border: none;
  background-color: rgba(239, 240, 245, 0.3);
}

::v-deep .fks-input__count-inner {
  background: rgba(239, 240, 245, 0.3) !important;
}

::v-deep .fks-switch {
  display: flex !important;
  justify-content: flex-end;
  margin-right: 6px;
}
// .item {
// border: 1px solid #eee;
// padding: 33px 33px 0 33px;
//  height: 225px;
// }
.avatar-uploader {
  // position: relative;
  display: flex;
  align-items: center;
  width: 280px;
  min-height: 64px;
  padding: 16px 0;
  border-radius: 4px;
  background-color: rgba(239, 240, 245, 0.3);
}

.fks-upload__tip {
  color: #999;
}

.avatar-uploader-icon:hover {
  border-color: #d9d9d9;
}

.avatar-uploader-icon {
  width: 144px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  color: #8c939d;
}

::v-deep .avatar-uploaderx.fks-upload .fks-upload {
  width: 60px;
  height: 60px;
  margin: 0 auto;
}

::v-deep .fks-upload {
  width: 100%;
}

.img-container {
  display: flex;
  align-items: center;
  width: 100%;

  .website_avatar {
    margin: 0 auto;
  }
}

.logo_avatar {
  margin: 0 auto;
  cursor: pointer;
}

.img-uploader {
  display: flex;
  height: 144px;
}

.drawer-container {
  width: 100%;
  min-width: 720px;
  height: 100%;
  padding-top: 56px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 14px;
  background-color: white !important;

  .switch-item,
  .site-title {
    margin-bottom: 8px;
    color: #555;
  }

  .watermark {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #555;

    span {
      margin-right: 38px;
    }

    .contain {
      display: flex;
      flex-wrap: wrap;
      width: 144px;
    }

    .watermark-item {
      width: 44px;
      height: 44px;
      margin-top: 3px;
      margin-right: 3px;
      background-color: rgba(239, 240, 245, 1);

      .item-selectIcon {
        padding: 11px;
        padding-left: 14px;
        color: var(--theme-color);
      }
    }
  }

  .title {
    display: flex;
    font-weight: bold;
    font-size: 16px;
    color: #191919;
  }

  .row-content-container {
    padding: 0 24px;
    margin: 24px 0 36px;
    border: 1px solid #eee;
    border-radius: 8px;

    .row-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 64px;
      padding: 16px 0;
    }
  }

  .site-title {
    margin-top: 12px;
  }

  .site-logo {
    margin-top: 20px;
  }

  .drawer-switch {
    margin-left: 20px;
  }

  .drawer-input {
    width: 280px;
  }

  .drawer-inputx {
    width: 280px;
  }

  .watermark-select {
    margin-left: 14px;
  }

  .watermark-select-en {
    margin-left: 37px;
  }

  .fks-divider {
    background-color: #eee;
  }
}

.setting-checkbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  min-height: 40px;

  .setting-item {
    position: relative;
    height: 40px;
    margin-right: 20px;
    border-radius: 4px;
    cursor: pointer;

    &:last-child {
      margin-right: 0;
    }

    img {
      height: 40px;
    }

    .setting-selectIcon {
      position: absolute;
      top: 16px;
      right: 8px;
      font-weight: 700;
      font-size: 14px;
      text-align: right;
      color: var(--theme-color);
    }
  }
}

.setting-color {
  width: 28px;
  height: 28px;
  padding-right: 0;
  padding-left: 0;
  margin: 4px 0 4px 20px;
  border-color: transparent;
  border-radius: 5px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  cursor: pointer;

  &:first-child {
    margin-left: 0;
  }

  i {
    font-size: 14px;
  }
}
</style>
